<?php 
    $title = "HTML5 Practice";
    $subtitle = "Page 1";
?>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title><?php echo "$title: $subtitle"; ?></title>
		
        <link href="../css/default.css" rel="stylesheet" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

        <!-- jQuery -->
		<script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
		<script src="../js/jquery.highlight.js" type="text/javascript"> </script>
		<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

    </head>
    <body>
	
		<div data-role="page">
			<div data-role="header">
				<h1><?php echo "<span class='title'>$title</span>: <span class='subtitle'>$subtitle</span>"; ?></h1>
			</div><!-- /header -->

			<div data-role="content">	
				<div data-role="fieldcontain">
					<label for="name">Text Input:</label>
					<input type="text" name="name" id="name" value=""  />
				</div>	
				
				<div data-role="fieldcontain">
					<label for="name">Password:</label>
					<input type="password" name="password" id="password" value=""  />
				</div>	
				
			</div><!-- /content -->

			<div data-role="footer" >
				<div data-role="navbar">
					<ul>
						<li><a href="../index.php" data-transition="pop">Index</a></li>
						<li><a href="page2.php" data-transition="flow">Two</a></li>
						<li><a href="page3.php" data-transition="slideup">Three</a></li>
						<li><a href="sample1.php"  target="_blank">Fourth</a></li>
					</ul>
				</div><!-- /navbar -->

			</div><!-- /footer -->
		</div><!-- /page -->

    </body>
</html>